<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="el-card__body">
      <!-- 第一行开头 -->
      <el-form
        ref="Resetting "
        class="demo-form-inline"
        type="flex"
        justify="center"
        label-width="100px"
      >
        <!-- 第一行 -->
        <el-row
          type="flex"
          :span="20"
        >
          <el-col :span="8">
            <el-form-item label="司机账号:">
              <el-input
                v-model="object.account"
                value="account"
                placeholder="请输入司机账号"
                width:282px
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:">
              <el-input
                v-model="object.name"
                placeholder="请输入司机姓名"
                width:282px
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:">
              <el-input
                v-model="object.phone"
                placeholder="请输入司机手机号"
                width:282px
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第2行 -->
        <el-row
          type="flex"
          label-width="100px"
          :gutter="20"
        ><el-col :span="8">
           <el-form-item label="所属机构">
             <el-select
               v-model="object.current"
               placeholder="请选择所属机构"
               style="width:260px"
             >
               <!-- 树形结构 -->
               <el-option
                 v-for="item in dataList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.name"
               >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
          <!-- 重置和搜索功能 -->
          <el-col :span="8">
            <div style="padding-left: 30px; padding-right: 30px;">
              <el-form-item>
                <el-row type="flex">
                  <el-col style="margin-right: 10px;"> <el-button
                    type="warning"
                    @click="btnOK"
                  >搜索</el-button></el-col>
                  <el-col>
                    <el-button
                      plain
                      style="width:100px"
                      @click="resetData"
                    >重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格数据 -->
    <div class="el-card__box">
      <el-table
        :data="list"
        stripe
        style=" width:2400px"
      ><el-table-column
         width="80px"
         label="序号"
         type="index"
         prop="id"
       ><template slot-scope="scope">
         <span>{{
           scope.$index + (object.page - 1) * object.pageSize + 1
         }}</span>
       </template>
       </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="司机电话"
          prop="mobile"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="关联车辆"
          prop="truck.licensePlate"
        ></el-table-column>
        <el-table-column
          label="所需机构"
          prop="agency.name"
        ></el-table-column>
        <el-table-column label="工作状态">
          <template>
            <span class="el-icon-loading"></span><span> 上班</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150px"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="$router.push(`/driver-detail/${row.userId}`)"
            >查看</el-button>
            <span class="vertical">|</span>
            <el-button
              type="text"
              size="mini"
              @click="open(row)"
            >配置车型
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div
        class="block"
        type="flex "
      >
        <el-row align="middle">
          <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            :current-page="object.page"
            :page-size="object.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </el-row>
      </div>
    </div>

    <!-- 配置车型弹出框 -->
    <el-button
      type="text"
      @click="Visible"
    ></el-button>
    <!-- 配置车型弹出框点击确定之后的弹出框 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="11">司机编号:{{ driverDetail.userId }}</el-col>
        <el-col :span="11">司机名称:{{ driverDetail.name }}</el-col>
      </el-row>
      <el-row>

        <el-col :span="11">司机电话:{{ driverDetail.mobile }}</el-col>
        <el-col :span="11">所属机构:{{ subsidiaryorgan }}</el-col>
      </el-row>
      <el-form>
        <el-form-item
          style=" padding-top: 40px ;"
          label="配置车辆:"
        >
          <el-select
            v-model="licensePlate"
            placeholder="请选择"
            style="width: 240px;"
            @change="truckTypeDetailData()"
          >
            <el-option
              v-for="item in Vehicledropdownbox"
              :key="item.id"
              :label="item.licensePlate"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-table
          :data="minForm"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="licensePlate"
            label="车牌号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            label="车辆状态"
            prop="workStatus"
            width="180"
          >
            <template v-slot="{row}">
              <span v-if="row.workStatus === 0">停用</span>
              <span v-else>可用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="mini"
                @click="$router.push({path:'/transit/vehicle-detail',query:{id:row.id,formUrlName:'车辆管理'}})"
              >查看</el-button>
              <span>|</span>
              <el-button
                type="text"
                size="mini"
                @click="licensePlate=''"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-row class="center">
        <el-button
          type="warning"
          @click="dialogVisible=false"
        >确定</el-button>
        <el-button
          style="width:100px"
          plain
          @click="dialogVisible=false"
        >取消</el-button>
      </el-row>
    </el-dialog>
  </div>

</template>
<script>
import { agencyList } from '@/api/institutions'
import { driverList, driverDetail, getTruckListInDriver, truckTypeDetail } from '@/api/transit'

export default {
  name: 'Courses',

  data() {
    return {
      object: {
        account: '', // 司机账号
        agentld: '', // 机构id
        name: '', // 司机名称
        phone: '', // 电话
        workStatus: '', // 工作状态
        page: 1, // 页码
        pageSize: 10 // 页尺寸
      },
      list: [],
      queryParams: '',
      dataList: [],
      resetDatae: '',
      dialogVisible: false,
      total: 0,
      driverDetail: {},
      id: '',
      subsidiaryorgan: '', // 所属机构
      Vehicledropdownbox: [], // 车辆车牌号的数据下拉框
      licensePlate: '', // 绑定数据弹窗车牌号
      minForm: [] //
    }
  },

  created() {
    this.driverList()
    this.agencyListNull()
  },
  methods: {
    // 全部的给list
    // 渲染分页器
    // 渲染表格和分页器的数据
    async driverList() {
      // 渲染表格
      const driver = await driverList(this.object)
      this.list = driver.data.items
      console.log(this.list)
      this.total = +driver.data.counts
    },
    checkbox(current) {
      this.object.page = current
      this.driverList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${+val} 条`)
    },
    handleCurrentChange(val) {
      this.object.page = val
      this.driverList()
      console.log(`当前页: ${val}`)
    },
    // 搜索的给list
    async btnOK() {
      const res = await driverList(this.object)
      this.list = res.data.items
    },
    // 所属机构树形结构
    async agencyListNull() {
      const { data } = await agencyList()
      // 转换为数组的方法JSON.parse(把data转换成数组)
      this.dataList = JSON.parse(data)
      console.log(this.dataList)
    },
    //  点击配置车型弹出来的弹框
    open(row) {
      this.id = row.userId
      //  运用到啦ELement-ul里面MessageBox里面的一个dangerouslyUseHTMLString:为true就可以在this.$confirm里面写HTML样式
      this.$confirm(
        '配置车辆需满足以下条件:</br> <div class="driver"><span>1 司机信息已完善<span/> <span>2 司机也设置排班</span></div><p>3 司机绑定车辆未在启用状态</p>',
        '车辆配置',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          // 显示弹出框
          this.dialogVisible = true
          this.driverDetailRodel()
        })
        .catch(() => {
          this.$message('你取消啦')
        })
    },
    //  点击重置重置表单
    resetData() {
      //  把司机账号和手机号和名字给重置了
      this.object.account = ''
      this.object.phone = ''
      this.object.name = ''
      this.object.current = ''
      // 重置表单和更新表格数据↓
      this.driverList()
    },
    Visible() {
      this.dialogVisible = true
    },
    async driverDetailRodel() {
      const resData = await driverDetail(this.id)
      console.log(resData, '1111')
      this.driverDetail = resData.data
      this.subsidiaryorgan = resData.data.agency.name
      const { data } = await getTruckListInDriver()
      console.log('琪哥帅气', data)
      this.Vehicledropdownbox = data
    },
    // 第2次跳转过去联动下拉框列表表格的数据
    async truckTypeDetailData() {
      const { data } = await truckTypeDetail(this.licensePlate)
      console.log('我是胡雅琪', data)
      this.minForm = [data]
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
}
.el-card__body {
  padding-top: 20px;
  background-color: #fff;
  margin: 15px 20px;
}
.el-card__box {
  padding: 15px 20px;
  background-color: #fff;
  margin: 15px 20px;
  height: 100%;

}
.el-pagination {
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  height: 30px;
}
.vertical {
  color: #bebebe;
}
.center{
  text-align: center;
  padding-top: 40px;
}
</style>
